<template>
  <div>
    <CategorySelector style="margin-bottom:10px" :disabled="showAttrList"></CategorySelector>
    <el-card>
      <div v-if="showAttrList">
        <el-button type="primary" :disabled="!categoryListStore.category3Id" :icon="Plus" @click="delOldAttrValue"
          >添加属性</el-button
        >
        <el-table :data="attrList" border style="width: 100%; margin-top: 10px">
          <el-table-column type="index" label="序号" width="100" />
          <el-table-column prop="attrName" label="属性名称" width="260" />
          <el-table-column prop="attrValueList" label="属性值列表">
            <template v-slot="{ row }">
              <el-tag
                class="ml-2"
                type="success"
                v-for="attrValue in row.attrValueList"
                :key="attrValue.id"
                style="margin-right: 7px"
                >{{ attrValue.valueName }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" width="300">
            <template v-slot="{ row, $index }">
              <el-button
                @click="editAttrList(row,$index)"
                title="编辑"
                type="warning"
                size="small"
                :icon="Edit"
              ></el-button>
              <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                icon-color="#626AEF"
                title="您确定要删除此条数据吗?"
                @confirm="confirmEvent(row)"
              >
                <template #reference>
                  <el-button
                    :icon="Delete"
                    type="danger"
                    size="small"
                  ></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-else >
        <el-form  >
          <el-form-item label="属性名" >
            <el-input @click="isShowInput=true"  v-model="attrValueInfo.attrName" placeholder="请输入属性名" style="width:300px"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addAttrValue">添加属性值</el-button>
            <!-- <el-button type="default" @click="showAttrList = true">取消</el-button> -->
          </el-form-item>
        </el-form>
        <el-table :data="attrValueInfo.attrValueList">
          <el-table-column label="序号" type="index" align="center" width="100px"></el-table-column>
          <el-table-column label="属性值名称" style="width:500px">
            <template v-slot="{row,$index}">
              <el-input @blur="deleteCurrentRow(row,$index)" v-if="row.isShowInput" ref="inputRef" size="small" v-model="row.valueName" style="width:500px"></el-input>
              <span v-else @dblclick="toEditValueName(row,$index)">{{row.valueName}}</span>
            </template>
              
           
          </el-table-column>
          <el-table-column label="操作" >
            <template v-slot="{row,$index}">
              <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                icon-color="#626AEF"
                title="您确定要删除此条数据吗?"
                @confirm="delAttrValueList($index)"
              >
                <template #reference>
                  <el-button
                    :icon="Delete"
                    type="danger"
                    size="small"
                  ></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" @click="addOrUpdateAttrInfo">保存</el-button>
        <el-button type="default" @click="showAttrList = true">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
import CategorySelector from "@/components/CategorySelector/index.vue";
export default {
  name: "Attr",
  components: {
    CategorySelector,
  },
};
</script>
<script lang="ts" setup>
import { watch, ref, reactive,nextTick } from "vue";
import { Plus, Edit, Delete } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useCategoryListStore } from "@/stores/categoryList";
import {
  reqGetAttrValueList,
  reqDelOneAttrValue,
  reqPostSaveOrUpdateAttrInfo
} from "@/api/product/attrList";
const categoryListStore = useCategoryListStore();
const showAttrList = ref<boolean>(true);
// 定义值存储属性列表
const attrList = ref([]);
// 发送请求获取属性列表
const getAttrValueList = async () => {
  const result = await reqGetAttrValueList({
    category1Id: categoryListStore.category1Id,
    category2Id: categoryListStore.category2Id,
    category3Id: categoryListStore.category3Id,
  });
  console.log("属性列表", result);
  attrList.value = result;
};
// 监听3id
watch(
  () => categoryListStore.category3Id,
  async (category3Id) => {
    console.log("3id", category3Id);
    if (!category3Id) {
      // 数组列表要清空
      attrList.value = [];
      return;
    }
    getAttrValueList();
  },
  { immediate: true }
);
const inputRef = ref(null)

// 点击添加属性 给attrInfo.attrValueList数组中添加内容
const isShowInput = ref<boolean>(true)
const addAttrValue = () => {
  // 将输入的值添加到attrValueInfo.attrName中
  attrValueInfo.attrValueList.push({
    valueName:'', //属性值列表里的属性名
    // attrId:attrValueInfo.categoryId,
    isShowInput : true
  })
  nextTick(()=>{
    inputRef.value?.focus()
  })
};

// 属性列表里的属性值修改
const toEditValueName = (row,index) => {
  row.isShowInput = true
  nextTick(()=>{inputRef.value?.focus()})
}
// 失去焦点，删除当前行
const deleteCurrentRow = (row,index) =>{
  if(!row.valueName){
    attrValueInfo.attrValueList.splice(index,1)
    return 
  }
  row.isShowInput = false
}

// 删除某行属性
const delAttrValueList = (index:number) => {
   attrValueInfo.attrValueList.splice(index,1)
}

// 添加新属性 前删除旧值
const delOldAttrValue = () => {
showAttrList.value = false
// 清空旧值
attrValueInfo.attrName = ''
attrValueInfo.attrValueList = []
delete attrValueInfo.id
}

// 保存按钮发送请求添加属性
const addOrUpdateAttrInfo = async() => {
  attrValueInfo.categoryId = categoryListStore.category3Id
  await reqPostSaveOrUpdateAttrInfo(attrValueInfo)
  ElMessage.success('属性添加成功')
  showAttrList.value = true
  // 刷新页面
  getAttrValueList()
}

// 定义一个属性对象，用于收集要添加的属性信息
const attrValueInfo = reactive({
  attrName:'',
  attrValueList:[],
  categoryId:-1,
  categoryLevel:3
})


// 点击删除属性 发送请求
const confirmEvent = async (row) => {
  await reqDelOneAttrValue(row.id);
  ElMessage.success("删除成功");
  getAttrValueList();
};

// 点击编辑属性
const editAttrList =async (row) => {
  showAttrList.value = false;
  Object.assign(attrValueInfo,row)
  //  await reqPostSaveOrUpdateAttrInfo(attrValueInfo)
  //  getAttrValueList();
}
</script>

<style>
</style>